<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >  

    <ui:composition template="layout.xhtml">
        <ui:define name="corpo">
            <h:form>
                <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  actionListener="#{managerIndex.redirect('indexProtocolo.xhtml')}" value="Protocolo" update="@form" immediate="true"/> >
                    <p:commandLink  value="Pesquisar" update="@form" immediate="true"/>
                </div>
            </h:form>


            <p:tabView dynamic="true" id="tabView" activeIndex="#{managerOrcamento.tab}">  
                <p:tab id="tab1" title="Protocolo">   
                    <h:form id="buscar_form" acceptcharset="utf-8"> 

                        <p:panel>
                            <p:messages  id="msg" />
                            <f:validateBean disabled="true">
                                <h:panelGrid columns="2" id="panelGridEscolha" styleClass="textAlignRight" columnClasses="textAlignRight">

                                    <h:outputLabel value="Cód. Protocolo: " />

                                    <p:inputText  value="#{managerConsultarProtocolo.cod}" size="29"/>

                                    <h:outputLabel value="Cliente: "/>
                                    <p:autoComplete id="cliente" value="#{managerConsultarProtocolo.protocolo.cliente}" 
                                                    completeMethod="#{managerPessoa.autoComplete}"  
                                                    var="c" itemLabel="#{c.nome}" itemValue="#{c}" 
                                                    converter="pessoaConverter" forceSelection="true" 
                                                    converterMessage="Erro, verifique o Cliente" 
                                                    minQueryLength="3" scrollHeight="200" dropdown="true" size="26"> 
                                    </p:autoComplete>

                                    <h:outputLabel value="Data :"/>
                                    <p:calendar value="#{managerConsultarProtocolo.protocolo.dataCad}" 
                                                mode="popup" showOn="both" pattern="dd/MM/yyyy" size="26"/>
                                    <h:outputLabel />
                                </h:panelGrid> 
                            </f:validateBean>
                            <div class="buttonAction">
                                <p:commandButton value="Buscar" icon="ui-icon-search" 
                                                 actionListener="#{managerConsultarProtocolo.buscar()}"
                                                 update="@form, protocoloTable, msg"/>
                                <p:commandButton value="Limpar" icon="ui-icon-circle-close" 
                                                 actionListener="#{managerConsultarProtocolo.init()}"
                                                 update="@form, protocoloTable, msg"/>
                                <center>
                            <p:ajaxStatus style="width:16px;height:16px;" >  
                                <f:facet name="start">  
                                    <h:graphicImage value="/media/img/loading.gif" />  
                                </f:facet>  
                                <f:facet name="complete">  
                                    <h:outputText value="" />  
                                </f:facet>  
                            </p:ajaxStatus>
                        </center>
                            </div>


                            <br/>
                            <p:dataTable id="protocoloTable" var="protocolo" value="#{managerConsultarProtocolo.protocolos}" 
                                         paginator="true" rows="5"
                                         paginatorPosition="bottom"
                                         paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} "  
                                         rowsPerPageTemplate="5,10,15"
                                         emptyMessage="Nenhum Registro Encontrado">    

                                <f:facet name="header">  
                                    Dados Protocolos
                                </f:facet>

                                <p:column  style="width:5px;" >  
                                    <p:rowToggler/>
                                </p:column>

                                <p:column  style="width:50px;">  
                                    <f:facet name="header" >   
                                        Código
                                    </f:facet>  
                                    <h:outputText value="#{protocolo.id}"   />  
                                </p:column>

                                <p:column  style="width:300px;">  
                                    <f:facet name="header" >   
                                        Cliente
                                    </f:facet>  
                                    <h:outputText value="#{protocolo.cliente.nome}"   />  
                                </p:column>


                                <p:column  style="width:100px;">  
                                    <f:facet name="header" >   
                                        Data
                                    </f:facet>  
                                    <h:outputText value="#{protocolo.dataCad}" >
                                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                                    </h:outputText>  
                                </p:column>

                                <p:column  style="width:100px;">  
                                    <f:facet name="header" >   
                                        Cartório
                                    </f:facet>  
                                    <h:outputText value="#{protocolo.valorTotalCartorio}" >  
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>
                                </p:column>
                                <p:column  style="width:100px;">  
                                    <f:facet name="header" >   
                                        Fermojupi
                                    </f:facet>  
                                    <h:outputText value="#{protocolo.valorTotalFermojupi}" > 
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>
                                </p:column>
                                <p:column  style="width:100px;">  
                                    <f:facet name="header" >   
                                        Valor
                                    </f:facet>  
                                    <h:outputText value="#{managerConsultarProtocolo.valorDoProtocolo(protocolo)}" >  
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>
                                </p:column>

                                <p:column  style="width:50px; text-align: center">  
                                    <f:facet name="header" >   
                                        Situação
                                    </f:facet>  
                                    <p:graphicImage url="/media/img/selo.jpg" style="width:24px; margin-left: 10px; "
                                                    rendered="#{managerConsultarProtocolo.pendenteSelo(protocolo.id)}"
                                                    title="Selos Pendente" />
                                    <p:graphicImage url="/media/img/ok.png"  
                                                    rendered="#{!managerConsultarProtocolo.pendenteSelo(protocolo.id) and !managerConsultarProtocolo.pendenteSelo(protocolo.id) }"
                                                    title="Protocolo Finalizado" />


                                </p:column>
                                <p:column  style="width:20px;">  
                                    <f:facet name="header" >   
                                        Opções
                                    </f:facet>  
                                    <p:commandButton icon="ui-icon-search" title="Ver" label="Ver"
                                                     actionListener="#{managerVisualizarProtocolo.ver(protocolo.id)}" 
                                                     update="@form"/>
                                </p:column>

                                <p:rowExpansion>
                                    <h:outputLabel value="Serviços do Protocolo" />
                                    <table style="width:100%">
                                        <tbody style="background-color: #5277A9; color: #ffffff; ">
                                            <td style="font-weight: bold; text-align: center;">
                                                Ato Item
                                            </td>
                                            <td style="font-weight: bold; text-align: center;">
                                                Cartório
                                            </td>
                                            <td style="font-weight: bold; text-align: center;">
                                                Fermojupi
                                            </td>
                                            <td style="font-weight: bold; text-align: center;" >
                                                Valor
                                            </td>
                                            <td style="font-weight: bold; text-align: center;" >
                                                Selos
                                            </td>

                                        </tbody>
                                        <ui:repeat value="#{protocolo.servicoProtocolos}" var="servico">
                                            <tr>
                                                <td style="text-align: center;">
                                                    <h:outputLabel value="#{servico.atoItem.codigo}" /> - 
                                                    <h:outputLabel value="#{servico.atoItem.descricao}" /></td>
                                                <td style="text-align: center;"><h:outputLabel value="#{servico.valorCartorio}" /></td>
                                                <td style="text-align: center;" ><h:outputLabel value="#{servico.valorFermojupi}" /></td>
                                                <td style="text-align: center;"><h:outputLabel value="#{servico.valor}" /></td>
                                                <td style="text-align: center;">
                                                    <ui:repeat value="#{servico.selos}" var="sel">
                                                        <p:commandLink id="selos" title="Número: #{sel.numero} - Serie: #{sel.serie}"  
                                                                       actionListener="#{managerConsultarProtocolo.protocoloGetSelos(sel.id)}"
                                                                       oncomplete="protDlg.show()"  update=":tabView:buscar_form:pesquisarProtocoloDlg"  >
                                                            <div style="width: 30px; height:30px; float:left; margin-left: 2px;
                                                                 background-color: \##{sel.tipoSelo.corSelo.cor};">
                                                            </div>
                                                        </p:commandLink>
                                                    </ui:repeat>


                                                </td>
                                            </tr>
                                        </ui:repeat>

                                    </table>

                                </p:rowExpansion>
                            </p:dataTable> 
                            <br/>
                            <center>
                                <p:commandButton id="limpar" icon="ui-icon-arrowreturnthick-1-w" value="Cancelar" actionListener="#{managerConsultarProtocolo.redirect('protocolo.xhtml')}" immediate="true" />
                            </center> 
                        </p:panel>
                        <p:dialog  header="Informações do Selo" widgetVar="protDlg" modal="true">  
                            <h:panelGrid columns="2" id="pesquisarProtocoloDlg" styleClass="textAlignRight" columnClasses="textAlignRight"> 
                                <h:outputLabel value="Número: " />

                                <p:row>
                                    <h:outputText value="#{managerConsultarProtocolo.seloVer.numero}"/>
                                    <h:outputLabel value="Série: " style="font-weight: bold; float: none;"/>
                                    <h:outputText value="#{managerConsultarProtocolo.seloVer.serie}"/>
                                </p:row>
                                <h:outputLabel value="Tipo de Selo " />
                                <h:outputText value="#{managerConsultarProtocolo.seloVer.tipoSelo.nome}"/>
                                <h:outputLabel value="Data Entrada: " />
                                <h:outputText value="#{managerConsultarProtocolo.seloVer.detalheEntradaSelo.entradaSelo.dataEntrada}">
                                    <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/>
                                </h:outputText>
                                <h:outputLabel value="Fornecedor: " />
                                <h:outputText value="#{managerConsultarProtocolo.seloVer.detalheEntradaSelo.entradaSelo.fornecedor.nome}"/>
                                <h:outputLabel value="Comentário: " />
                                <h:outputText value="#{managerConsultarProtocolo.seloVer.detalheEntradaSelo.entradaSelo.comentario}"/>
                            </h:panelGrid>
                            <f:facet name="footer">
                                <center>
                                    <p:commandButton value="Fechar" icon="ui-icon-close" onclick="protDlg.hide()"/>
                                </center>
                            </f:facet>
                        </p:dialog>
                        <br/>
                    </h:form>

                </p:tab>
                <p:tab id="tab2" title="Selo">   
                    <h:form id="buscar_formSelo" acceptcharset="utf-8"> 
                        <p:panel>
                            <p:messages showDetail="true"  id="msg"/> 
                            <h:panelGrid columns="2" id="panel"  styleClass="textAlignRight" columnClasses="textAlignRight"> 
                                <h:outputLabel value="Serie : " />
                                <p:inputText  value="#{managerConsultarProtocoloSelo.selo.serie}" size="30" />
                                <h:outputLabel value="Numero : " />
                                <p:inputText  value="#{managerConsultarProtocoloSelo.numero}" size="30" />
                                <h:outputLabel value="Tipo Selo :"/>
                                <p:autoComplete id="tipoSelo" panelStyle="width:250px !important;" effect="blind" 
                                                value="#{managerConsultarProtocoloSelo.selo.tipoSelo}" 
                                                completeMethod="#{managerTipoSelo.completeTipoSelo}"  
                                                var="p" itemLabel="#{p.nome}" itemValue="#{p}" 
                                                converter="tipoSeloConverter" forceSelection="true" 
                                                converterMessage="Erro, verifique o Tipo Selo" 
                                                minQueryLength="3" dropdown="true" size="26" scrollHeight="200"> 
                                    <p:ajax event="itemSelect" listener="#{managerConsultarProtocoloSelo.handleSelectTipoSelo}"/>
                                    <p:column> 
                                        <table >
                                            <tr style="height:20px; background-color: \##{p.corSelo.cor};">
                                                <td style="width: 20px;"></td>
                                            </tr>
                                        </table>
                                    </p:column>
                                    <p:column>  
                                        #{p.nome}
                                    </p:column>  
                                </p:autoComplete>
                            </h:panelGrid>
                            <div class="buttonAction">
                                <p:commandButton value="Buscar" actionListener="#{managerConsultarProtocoloSelo.pesquisar()}" 
                                                 update="buscar_formSelo" process="buscar_formSelo" icon="ui-icon-search"/>

                                <p:commandButton value="Limpar" icon="ui-icon-circle-close" 
                                                 actionListener="#{managerConsultarProtocoloSelo.clean()}"
                                                 update="@form"/>
                            </div>
                            <p:dataTable id="proTable" var="pro" value="#{managerConsultarProtocoloSelo.lstServicoProtocolos}" 
                                         paginator="true" rows="5"
                                         paginatorPosition="bottom"
                                         emptyMessage="Nenhum Registro encontrado"
                                         paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                                         rowsPerPageTemplate="5,10,15">     
                                <f:facet name="header">  
                                    Protocolo
                                </f:facet>
                                <p:column  style="width:30px;">  
                                    <f:facet name="header" >   
                                        Cód.
                                    </f:facet>  
                                    <h:outputText value="#{pro.id}"  />  
                                </p:column>
                                <p:column >  
                                    <f:facet name="header" >   
                                        Cliente
                                    </f:facet>  
                                    <h:outputText value="#{pro.protocolo.cliente.nome}"  />  
                                </p:column>
                                <p:column headerText="Serviço" >  
                                    <h:outputText value="#{pro.atoItem.descricao}" />
                                </p:column>
                                <p:column  style="width:50px;">  
                                    <f:facet name="header" >   
                                        Valor Cartório
                                    </f:facet>  
                                    <h:outputText value="#{pro.valorCartorio}"  style=" float: right">  
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>
                                </p:column>
                                <p:column  style="width:50px;">  
                                    <f:facet name="header" >   
                                        Valor FermoJupi 
                                    </f:facet>  
                                    <h:outputText value="#{pro.valorFermojupi}"  style="float: right">
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>
                                </p:column>
                                <p:column>  
                                    
                                    <f:facet name="header"   >   
                                        <table style="width: 287px;" >
                                            <tr>
                                                <td style="width: 80%;">
                                                    <h:outputText value="Descrição"/>  
                                                </td>
                                                <td style="width: 10%;">
                                                    <h:outputText value="Serie"/>  
                                                </td>
                                                <td style="width: 20%;">
                                                    <h:outputText value="Nº"/>  
                                                </td>
                                                 <td style="text-align: center; width: 20%">
                                                       Cor
                                                </td>
                                            </tr>
                                    </table>
                                    </f:facet>  
                                    <table style="width:100%">
                                        <ui:repeat value="#{pro.selos}" var="sel">
                                            <tr>
                                                <td style="width: 56%;">
                                                    <h:outputText value="#{sel.tipoSelo.descricao}"/>  
                                                </td>
                                                <td style="width: 16%;">
                                                    <h:outputText value="#{sel.serie}"/>  
                                                </td>
                                                <td style="width: 11%;">
                                                    <h:outputText value="#{sel.numero}"/>  
                                                </td>
                                                 <td style="text-align: center;">
                                                        <p:commandLink id="selos" title="Número: #{sel.numero} - Serie: #{sel.serie}"  
                                                                       actionListener="#{managerConsultarProtocoloSelo.protocoloGetSelos(sel.id)}"
                                                                       oncomplete="seloDlg.show()"  >
                                                                <div style="width: 30px; height:30px; float:left; margin-left: 2px;
                                                                    background-color: \##{sel.tipoSelo.corSelo.cor};">
                                                                </div>
                                                        </p:commandLink>
                                                </td>
                                            </tr>
                                        </ui:repeat>
                                    </table>
                                </p:column>
                                <p:column  style="width:20px;">  
                                    <f:facet name="header" >   
                                        Opções
                                    </f:facet>  
                                    <p:commandButton icon="ui-icon-search" title="Ver" label="Ver"
                                                     actionListener="#{managerVisualizarProtocolo.ver(pro.protocolo.id)}" 
                                                     update="@form"/>
                                </p:column>

                            </p:dataTable>  
                            <p:dialog  header="Informações do Selo" widgetVar="seloDlg" modal="true">  
                                <h:panelGrid columns="2" id="pesquisarSeloProtocoloDlg" styleClass="textAlignRight" columnClasses="textAlignRight"> 
                                    <h:outputLabel value="Número: " />

                                    <p:row>
                                        <h:outputText value="#{managerConsultarProtocoloSelo.seloVer.numero}"/>
                                        <h:outputLabel value="Série: " style="font-weight: bold; float: none;"/>
                                        <h:outputText value="#{managerConsultarProtocoloSelo.seloVer.serie}"/>
                                    </p:row>
                                    <h:outputLabel value="Tipo de Selo " />
                                    <h:outputText value="#{managerConsultarProtocoloSelo.seloVer.tipoSelo.nome}"/>
                                    <h:outputLabel value="Data Entrada: " />
                                    <h:outputText value="#{managerConsultarProtocoloSelo.seloVer.detalheEntradaSelo.entradaSelo.dataEntrada}">
                                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/>
                                    </h:outputText>
                                    <h:outputLabel value="Fornecedor: " />
                                    <h:outputText value="#{managerConsultarProtocoloSelo.seloVer.detalheEntradaSelo.entradaSelo.fornecedor.nome}"/>
                                    <h:outputLabel value="Comentário: " />
                                    <h:outputText value="#{managerConsultarProtocoloSelo.seloVer.detalheEntradaSelo.entradaSelo.comentario}"/>
                                </h:panelGrid>
                                <f:facet name="footer">
                                    <div class="buttonAction">
                                        <p:commandButton value="Fechar" icon="ui-icon-close" onclick="seloDlg.hide()"/>
                                    </div>
                                </f:facet>
                            </p:dialog>
                        </p:panel>
                        <div class="buttonAction">
                            <p:commandButton id="cancelar" icon="ui-icon-arrowreturnthick-1-w" 
                                             value="Cancelar" 
                                             actionListener="#{managerConsultarProtocoloSelo.redirect('indexSelo.xhtml')}"
                                             immediate="true" />
                        </div>
                    </h:form>
                </p:tab>
            </p:tabView>
        </ui:define>
    </ui:composition>
</html>